<template>
	<div class="add-label">
		<el-dialog :visible.sync="visible" width="35%" :before-close="closeAddLabel">
			<span slot="title" class="el-dialog__title">{{ dialogTitle }}</span>
			<div class="add-content">
				<el-form :model="form" :rules="rules" ref="addLabelForm" label-width="120px" class="demo-ruleForm" @submit.native.prevent>
					<el-form-item label="标签名称" prop="name">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button class="close" @click="closeAddLabel">关 闭</el-button>
				<el-button class="sure" @click="sureAddLabel">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { createBizLabel, modifyBizLabelById } from '@/api/api';

export default {
	props: {
		visible: {
			type: Boolean,
			required: true,
			default: () => false
		},

		labelData: {
			type: Object,
			required: false,
			default: () => undefined
		}
	},

	data() {
		const validateLabelName = (rule, value , callback) => {
			if (value === this.newLabelName) {
				callback(new Error('标签已存在'));
			} else {
				callback();
			}
		};

		return {
			showDialog: true,
			dialogTitle: '新增标签',
			newLabelName: undefined,
			rules: {
				name: [
						{ required: true, message: '请输入标签名称', trigger: 'blur' },
						{ validator: validateLabelName, trigger: 'blur'}
					]
			},
			form: {
				name: '',
				limit: 10
			},
			labelDataCopy: undefined
		}
	},

	watch: {
		labelDataCopy(newValue){
			this.form.name = newValue?.name;
		}
	},

	mounted() {
		console.log('add label: mounted, visible: ', this.visible, 'and labelData:', this.labelData);
		this.dialogTitle =  !this.labelData ? '新增标签' : `修改标签`;
		this.labelDataCopy = this.labelData;
	},

	updated() {
		console.log('add label: updated, visible: ', this.visible, 'and labelData:', this.labelData);
		this.dialogTitle =  !this.labelData ? '新增标签' : `修改标签`;
		this.labelDataCopy = this.labelData;
	},

	methods: {
		closeAddLabel() {
			this.labelDataCopy = undefined;
			this.$refs.addLabelForm.resetFields();
			this.$emit('close');
		},

		sureAddLabel() {
			this.newLabelName = undefined;
			this.$refs.addLabelForm.validateField('name', error => {
				if (!error) {
					if (this.labelData){
						modifyBizLabelById(this.labelData.id, { name: this.form.name }).then(res => {
							if (res.data && res.data.code === 200){
								this.closeAddLabel();
								this.$emit('updateLabelSuccess');
								this.$message.success('修改标签成功');
							} else {
								this.$message.error(res);
							}
						}).catch (error => {
							switch (error.code){
								case 1000:
									this.$message.error('系统错误');
									break;
								case 1002:
									this.newLabelName = this.form.name;
									this.$refs.addLabelForm.validateField('name');
									break;
								case 1101:
									this.$message.error('标签 id 不存在');
									break;
								case 1301:
									this.$message.error('标签名字不能为空');
									break;
								default:
									this.$message.error(error);
									break;
							}
						});
					} else {
						createBizLabel(this.form.name).then(res => {
							if (res.data && res.data.code === 200){
								this.closeAddLabel();
								this.$emit('updateLabelSuccess');
								this.$message.success('新增标签成功');
							} else {
								this.$message.error(res);
							}
						}).catch(error => {
							switch (error.code){
								case 1000:
									this.$message.error('系统错误');
									break;
								case 1002:
									this.newLabelName = this.form.name;
									this.$refs.addLabelForm.validateField('name');
									break;
								case 1301:
									this.$message.error('参数错误');
									break;
								default:
									this.$message.error(error);
									break;
							}
						});
					}
				}
			});
		}
	}
}
</script>

<style lang="less">
.add-label {
	.el-dialog__body {
		padding: 10px 20px;
	}
	.el-input {
		input {
			height: 32px;
		}
	}
}
</style>

<style lang="less" scoped>
.add-label {
	.el-button {
		width: 56px;
		height: 32px;
		padding: 0;
		font-size: 14px;
	}
	.close {
		color: #999;
	}
	.sure {
		background-color: #6384fe;
		color: #fff;
	}
	.error {
		position: absolute;
		top: 104px;
		padding-left: 140px;
		color: #ff3b30;
	}
}
</style>